@charset "utf-8";
/* CSS Document */


    /*@font-face{
		font-family:'hwxk';
		src: url(../fonts/hwxk.ttf);
		font-weight:200;
	}
	@font-face{
		font-family:'amjt';
		src: url(../fonts/amjt.ttf);
		font-weight:200;
	}
	@font-face{
		font-family:'xjk';
		src: url(../fonts/xjk.ttf);
		font-weight:200;
	}
    */

 

.xhr {
	width:300px;
	height: 235px ;
	}
	.parent{
		position:absolute;
		top:70%;
		height: 235px ;
		}
	.small_pic{
			height:280px;
		}
	
	#dragen
	 {
	position:absolute;
	width:200px;
	top:20%;
	}
 
	
			nav{
				margin-top: 10%;
				}
		p {
		 
				float:left;
				padding-left:20px;
			}
		 
		p a{
			z-index:9999;
			position: relative;
			font-family: 'amjt';
			font-size: 24px;  
	    background-image:-webkit-linear-gradient(right,#00f7ff,#ffeb00,#35ff00); 
	    -webkit-background-clip:text; 
	    -webkit-text-fill-color:transparent; 
		}	
		#pDate {
				right:20px;
				z-index:9999;
				position: relative;
				float:left;				
				color:#2d00ff;
				font-family: 'amjt';
				font-size: 24px;
			}	 
		.weather {
			overflow:hidden;
			height:130px;
			color:#2d00ff;
			font-family: 'amjt';
			font-size: 24px;
			animation:jbcss 5s;
			-webkit-animation:jbcss 5s; /* Safari and Chrome */ 
		}	 
		li{
			list-style: none;			
			}
		.hide{
				display:none;
			}
		.main{
				display: flex;
				position: absolute;
				text-align: center;
				width:60%;
				left: 19%;
			}
		.vd {
				position: absolute;
				text-align: center;
				background:#7696C1;
				width:60%;
				margin-left: 12%;
    		margin-top: 16%;
			}
			
		
		footer{			
				position: absolute;
    		top: 55%;
    		right: 8%;
			}
 
  /*搜索框样式*/
    .input-group{
    	z-index:9999;
    	position: relative;
      justify-content: center;
      display: flex;
    }
  
    input{
    		
        width: 50%;
        height: 41px;
        background:none;
        border: 1px lime  solid;
        padding-left: 15px;
        border-radius: 5px 0 0 5px;
        font-size: 16px;
    }
    input[type=text]:focus {
        outline: none;
        /*outline-color: #DBDEE0;*/
    }
  
  	#today{
  	  left: 45%;
    /* position: absolute;*/
    	cursor: pointer;
  	}
  	
    .input-group .btn-primary{
    	cursor: pointer;
      background: #4E6EF2;
      border: 0px;
      color: #000;
      padding:0px 18px ;
        border-radius: 0px 5px 5px 0px;
    }
    .btn-small{
    	cursor: pointer;
				width:40px;
				height:40px;
				margin-left:5px;
				border: 0px;
				padding:0px 3px ;
				border-radius: 10px 0px 10px 0px;
				background: #4E6E00;
    		color:#000;
			}	
    .btn-primary:hover{
    		background: Lime;
    		color:#fff;
    	}
    .btn-small:hover{
    		background: Lime;
    		color:#fff;
    	}
    @-webkit-keyframes jbcss /* Safari and Chrome */
		{
			from {color:red;}
			to {color:#2d00ff;}
		}
		/*下面两个是核心样式*/
    .beat-char {
        line-height: 2em;
        position: relative;
        display: inline-block;
        background: transparent;
    }

    .rotate {
    		color:red;
    		font-size: '24px' ;
        transform: rotate(1080deg);
        -ms-transform: rotate(1080deg); /* IE 9 */
        -moz-transform: rotate(1080deg); /* Firefox */
        -webkit-transform: rotate(1080deg); /* Safari 和 Chrome */
        -o-transform: rotate(1080deg);
        -webkit-transition-duration: 0.8s;
    }
		.cloud{
			position:absolute; 
			top:0px; 
			left:0px; 
			width:100%; 
			height:100%; 
			background:url("../img/cloud.png") no-repeat;
			z-index:1;
			opacity:0.8;
		}     

		#cloud2{
			z-index:3;
		}

 

 table
        {
            border-collapse: collapse;
            margin: 0 auto;
            text-align: center;
        }
        table td, table th
        {
            border: 1px solid #cad9ea;
            color: #666;
            height: 30px;
            width: 100px;
        }
        table thead th
        {
            background-color: #CCE8EB;
            width: 100px;
        }
        table tr:nth-child(odd)
        {
            background: #fff;
        }
        table tr:nth-child(even)
        {
            background: #F5FAFA;
        }
        table tr:hover
				{
					background-color:yellow;
				}


tbody td img{
	margin-left:50px;
	width:65px;
	height:45px;
}

/* paragram */

.paraLeft{
	float:left;
	margin:5px 0 0 5px;
}


#local{
	font:26px "黑体";
	line-height:26px;
	margin-top:60px;
}

#city{
	font:18px "黑体";
	line-height:20px;
}

#hour{
	font:18px "黑体";
	line-height:20px;
	color:#8191A4;
	letter-spacing:-1px;
}

#temper{
	height:100px;
	margin-top:60px;
	float:right;
	font:96px Arial, Helvetica, sans-serif;
	line-height:100px;
	text-align:right;
	margin-left:5px;
}



#update{
	font:18px "黑体";
	line-height:45px;
	width:auto;
	height:45px;
	margin:0;
	float:right;
}

span#time1,span#time2{
	font: 24px 'amjt', Helvetica, sans-serif;
	width:auto;
	height:45px;
	line-height:45px;
	margin:0 15px;
	/*float:right;*/
}
span#time2{
	color:red;
	left:45%;
	top:15%;
	float:right;
	position:absolute;
}
 

span.blue{
	color:#7696C1;
}
